/**
 * @file 在线用户
 * @date 2025/11/18 17:02:29
 * @author lyqjob@yeah.net
 */

import {  useEffect, useState, useMemo, useCallback  } from 'react';
import { Table, Button, Space, Tag, message } from 'antd'
import { useSelector } from 'react-redux'
import { adminApi } from '@/services/admin'
import AuthButton from '@/components/AuthButton'
import dayjs from '@/utils/dayjs.js'

const OnlineUsers = () => {
    const [loading, setLoading] = useState(false)
    const [data, setData] = useState([])
    const sessionId = useSelector((state) => state.global.sessionid);



    // 获取当前活跃会话
    const fetchData = useCallback(async () => {
        setLoading(true)
        const [err, res] = await adminApi.getOnlineUsers()
        if (err) {
            setLoading(false)
            return
        }
        if (res.code === 200) {
            setData(res.data || [])
        }
        setLoading(false)
    }, [])

    useEffect(() => {
        fetchData()
    }, [fetchData])

    // 强制登出用户
    const onForceLogout = useCallback(async (sessionId) => {
        const [err, res] = await adminApi.forceLoginout(sessionId)
        if (err) {
            return
        }
        if (res.code === 200) {
            message.success('已强制登出')
            fetchData()
        }
    }, [fetchData])

    // 表格列配置
    const columns = useMemo(() => ([
        { 
            title: '序号', 
            dataIndex: 'id', key: 'id', width: 60, fixed: 'left',
            render: (_, record, index) => index + 1
        },

        { 
            title: '用户名', 
            dataIndex: 'username', key: 'username', width: 150,
            render: (username) => <Tag color="blue">{username}</Tag>
        },
        { 
            title: '会话ID', 
            dataIndex: 'session_id', key: 'session_id', width: 180,
            ellipsis: true,
        },
        { 
            title: '部门', 
            dataIndex: 'dept_name', key: 'department', width: 200,
            render: (department) => <Tag color="green">{department}</Tag>
        },
        { 
            title: 'IP', 
            dataIndex: 'client_ip', key: 'host_ip', width: 150,
            render: (host_ip) => <Tag color="orange">{host_ip}</Tag>
        },
        { 
            title: '登录地点', 
            dataIndex: 'location', key: 'login_location', width: 150,
            render: (login_location) => <Tag color="purple">{login_location}</Tag>
        },
        { 
            title: '浏览器', 
            dataIndex: 'browser', key: 'browser', width: 160,
            render: (browser) => <Tag color="red">{browser}</Tag>
        },
        { 
            title: '系统', 
            dataIndex: 'operating_system', key: 'operating_system', width: 160,
            render: (operating_system) => <Tag color="cyan">{operating_system}</Tag>
        },  
        { 
            title: '登录时间', 
            dataIndex: 'login_time', key: 'login_time', width: 200,
            render: (login_time) => dayjs(login_time).format('YYYY-MM-DD HH:mm:ss')
        },
        { 
            title: '会话时长(分钟)', 
            dataIndex: 'session_duration_minutes', key: 'session_duration_minutes', width: 200,
            render: (session_duration_minutes) => <Tag color="green">{session_duration_minutes}</Tag>
        },
        
        {
            title: '操作', key: 'action', width: 160,
            fixed: 'right',
            render: (_, record) => (
                <Space>
                    
                    <AuthButton permission={['online:force:logout']}>
                        <Button danger disabled={record.session_id === sessionId} onClick={() => onForceLogout(record.session_id)}>强制登出</Button>
                    </AuthButton>
                </Space>
            )
        }
    ]), [onForceLogout])

    return (
        <div className="container">
            <Table
                loading={loading}
                columns={columns}
                dataSource={data}
                rowKey="session_id"
                scroll={{ x: 1500 }}
                pagination={false}
            />
        </div>
    )
}

export default OnlineUsers